<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    import chartmixins from '../../util/echartmixins'
    import { colorOptions } from '../../util/common.js'
    import { alarmData } from '../../util/pie-mock-data'
    export default {
        name: 'Pie-ring',
        components: {},
        mixins: [chartmixins],
        props: {
            chartData: {
                type: Array,
                default: () => []
            },
            
            labelKey: {
                type: String,
                default: 'name'
            },

            valueKey: {
                type: String,
                default: 'value'
            },

            model: {
                type: String,
                default: 'nromal'
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        'labelColor': '#e5e5e5',
                    }
                }
            }
        },
        data() {
            return {
                defaultOptions: {
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        bottom: 10,
                        textStyle: {
                            color: this.chartStyle.labelColor,
                            fontSize: this.formatFontSize(12)
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '65%'],
                            center: ['40%', '50%'],
                            avoidLabelOverlap: false,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: this.formatFontSize(10),
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        color: this.chartStyle.labelColor,
                                        fontSize: this.formatFontSize(12)
                                    },

                                    labelLine: {
                                        length: this.formatFontSize(20),
                                        length2: this.formatFontSize(60),

                                        lineStyle: {
                                            width: this.formatFontSize(1.5)
                                        }
                                    }
                                }
                            },
                            data: []
                        }
                    ]
                }
            }
        },
        computed: {
            formatColor() {
                return colorOptions[this.model] || colorOptions['nromal']
            },
        },

        watch: {
            chartData(newVal) {
                this.refreshChartData(newVal)   
            }
        },

        methods: {
            refreshChartData(chartData = this.chartData) {
                const seriesData = chartData.map(item => {
                    return {
                        name: item[this.labelKey],
                        value: item[this.valueKey]
                    }
                })
                this.defaultOptions.series[0].data = seriesData
                this.setOption(this.defaultOptions, true)
            }   
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.refreshChartData(alarmData)
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>